<template>
  <div class="app-container">
    <div style="padding: 20px 0">
      <el-button
        v-if="roleCheck(commFeeCaseRoleType.add)"
        type="primary"
        size="mini"
        @click="openDialog({props:{},dialogName: dialogType.commConfig})"
      >添加代充返利方案
      </el-button>
    </div>
    <el-table v-loading="loading" :data="tableData" border>
      <el-table-column type="index" label="序号" width="60" align="center"></el-table-column>
      <el-table-column prop="createTime" label="添加时间" width="200" align="center">
        <template slot-scope="{row}">
          {{row.createTime | toTime}}
        </template>
      </el-table-column>
      <el-table-column prop="creator" label="添加人" align="center"></el-table-column>
      <el-table-column prop="name" label="代充返利方案名" width="240" align="center">
        <template slot-scope="{row,$index}">
          {{row.name }}
          <div class="special-label" v-if="$index===0">系统默认不可禁⽤</div>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态" width="120" align="center">
        <template slot-scope="{row}">
          {{row.status | toConverter('COMMISSION_STATUS')}}
        </template>
      </el-table-column>
      <el-table-column prop="lastUpdate" label="最后修改" width="200" align="center">
        <template slot-scope="{row}">
          {{row.lastUpdate | toTime}}
        </template>
      </el-table-column>
      <el-table-column prop="lastOperator" label="最后修改人" align="center"></el-table-column>
      <el-table-column label="操作" align="center" fixed="right" width="180">
        <template slot-scope="{row,$index}">
          <el-button
            type="text"
            @click="openDialog({props:row,dialogName: dialogType.commConfig})"
          >
            编辑方案
          </el-button>
          <el-button
            v-if="roleCheck(commFeeCaseRoleType.edit) && $index!==0"
            type="text"
            @click="onClickDeleteItem(row)"
          >
            删除方案
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <CommissionConfigDialog
      v-if="dialogName === dialogType.commConfig"
      v-model="dialogVisible"
      :id="dialogProps.id"
      :row-data="dialogProps"
      @submit="submitFinished"
    />
  </div>
</template>
<script>
// constants
import { messageType } from '@/const/enum';
import { commFeeCaseRoleType } from '@/router/commissionRoutes';
// components
import CommissionConfigDialog from './configDialog';
// services
import { agentRechargeRebatePlansList, deleteCommissionItem } from '@/services/api/commission';
// mixins
import { form, grid, dialog } from '@/build';

const dialogType = {
  commConfig: 'commission-config-dialog',
  addPoint: 'add-points-dialog',
};

export default {
  name: 'agent-charge-rebate-plan',
  mixins: [form, grid, dialog],
  components: {
    CommissionConfigDialog,
  },
  data() {
    return {
      commFeeCaseRoleType,
      filters: {
        limit: 20,
        page: 1,
      },
      tableData: [],
      dialogName: null,
      dialogType,
      deleteVisible: false,
    };
  },
  methods: {
    async onClickDeleteItem(data) {
      try {
        await this.$confirm('确定要删除此条代理代充方案吗？', '删除方案', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        });
        const [status, result] = await deleteCommissionItem(data);
        if (!status) throw new Error(result.message);
        this.$message({
          type: 'success',
          message: '删除成功!',
        });
        this.getAll();
      } catch (e) {
        if (e === messageType.cancel) return;
        this.$message({
          type: 'error',
          message: `删除失败!${e.message || ''}`,
        });
      }
    },
  },
  mounted() {
    this.bindGet(agentRechargeRebatePlansList, 'tableData', {
      action: 'getGrid',
      sendingData: 'filters',
    });
    this.getAll();
  },
};

</script>
<style lang="scss" scoped>
.special-label {
  position: absolute;
  right: 0;
  top: 0;
  background-color: purple;
  color: #fff;
  line-height: 1;
  padding: 3px;
  border-radius: 0 0 0 3px;
  font-size: 12px;
  transform-origin: top right;
}
</style>
